<template>
  <div class="index">
    <div class="ct">
      <div class="section">1</div>
      <div class="section">2</div>
      <div class="section">3</div>
      <div class="section">4</div>
    </div>
    <div class="nav">
      <div class="sub">sub1</div>
      <div class="sub">sub2</div>
      <div class="sub">sub3</div>
      <div class="sub">sub4</div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'list',
    data() {
      return {
        scroll: '',
        list: [{
          name: "第一条",
          backgroundcolor: "#90B2A3"
        }, {
          name: "第二条",
          backgroundcolor: "#A593B2"
        }, {
          name: "第三条",
          backgroundcolor: "#A7B293"
        }, {
          name: "第四条",
          backgroundcolor: "#0F2798"
        }, {
          name: "第五条",
          backgroundcolor: "#0A464D"
        }],
        navList: [1, 2, 3, 4, 5]
      }
    },
    methods: {
      dataScroll: function() {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
      },
      jump(index) {
        let jump = document.getElementsByClassName('section'); // 获取需要滚动的距离
        let total = jump[index].offsetTop;                    // Chrome
        document.body.scrollTop = total;                    // Firefox
        document.documentElement.scrollTop = total;                    // Safari
        window.pageYOffset = total;                    //
        $('html, body').animate({                    //
          'scrollTop': total                    //
        }, 400);
      },
      loadSroll: function () {
        var self = this;
        var $navs = $(".nav1");
        var sections = document.getElementsByClassName('section');
        for (var i = sections.length - 1; i >= 0; i--) {
          if (self.scroll >= sections[i].offsetTop - 100) {
            $navs.eq(i).addClass("current").siblings().removeClass("current")
            break;
          }
        }
      }
    },
    watch: {
      scroll: function () {
        this.loadSroll()
      }
    },
    mounted() {
      window.addEventListener('scroll', this.dataScroll);
    }
  }
</script>

<style scoped>

</style>
